<template>
  <div class="Header">
    <div class="Header-container visible">
      <div class="Header-container-content">
        <nuxt-link class="logo" to="/">
          <img src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="稀土掘金">
        </nuxt-link>
        <nav class="nav">
          <nuxt-link to="/">首页</nuxt-link>
          <nuxt-link to="/list">沸点</nuxt-link>
          <nuxt-link to="/list/car">课程</nuxt-link>
        </nav>
      </div> 
    </div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="less" scoped>
.Header{
  position: relative;
  height: 5rem;
  &-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    color: #909090;
    height: 5rem;
    z-index: 250;
    transition: all .2s;
    transform: translate3d(0,-100%,0);
    &.visible{
      transform: translateZ(0);
    }
    &-content{
      display: flex;
      align-items: center;
      height: 100%;
      max-width: 1440px;
      margin: 0 auto;
      .nav{
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0 20px;
        a{
          height: 5rem;
          line-height: 5rem;
          padding: 0 1rem;
          color: #515767;
          position: relative;
          &:not(.no-hover):hover:not(.no-border):before {
            content: "";
            position: absolute;
            top: auto;
            right: 0;
            bottom: 0;
            left: 1rem;
            height: 2px;
            background-color: #1e80ff;
            width: calc(100% - 2rem);
          }
        }
      }
    }
  }
}
</style>